<template>
  <BasePage>
    <MyTable
      ref="$table"
      :columns="columns"
      :query-schemas="querySchemas"
      :get-data="menuAuthApi.list"
    >
      <template #handle>
        <AddButton @click="handleAdd">添加权限</AddButton>
      </template>
    </MyTable>
    <MyForm ref="$form" :model-form="model" @submit="handleSubmit">
      <n-form-item label="父级" path="pid">
        <n-cascader
          v-model:value="model.pid"
          :options="parentOptions"
          clearable
          filterable
          value-field="id"
          :disabled="type !== 'add'"
        />
      </n-form-item>
      <n-form-item
        label="权限名称"
        path="name"
        :rule="{ required: true, message: '请输入权限名称' }"
      >
        <n-input v-model:value="model.name" maxlength="50" clearable show-count />
      </n-form-item>
      <n-form-item
        label="权限编码"
        path="code"
        :rule="{ required: true, message: '请输入权限编码' }"
      >
        <n-input v-model:value="model.code" maxlength="50" clearable show-count />
      </n-form-item>
      <n-form-item label="是否菜单" path="menuFlag">
        <n-switch
          v-model:value="model.menuFlag"
          :checked-value="1"
          :unchecked-value="0"
          @update:value="handleChangeMenuFlag"
        />
      </n-form-item>
      <n-form-item label="菜单图标" path="icon">
        <AsyncSelect
          v-model:value="model.icon"
          :options="iconfontOptions"
          :render-label="renderLabel"
          :disabled="!model.menuFlag"
        />
      </n-form-item>
      <n-form-item label="是否路由" path="routeFlag">
        <n-switch
          v-model:value="model.routeFlag"
          :checked-value="1"
          :unchecked-value="0"
          @update:value="handleChangeRouteFlag"
        />
      </n-form-item>
      <n-form-item
        label="路由路径"
        path="path"
        :rule="{ required: model.routeFlag, message: '请输入路由路径' }"
      >
        <n-input
          v-model:value="model.path"
          maxlength="100"
          clearable
          show-count
          :disabled="!model.routeFlag"
        />
      </n-form-item>
      <n-form-item
        label="路由组件"
        path="component"
        :rule="{ required: model.routeFlag, message: '请输入路由组件' }"
      >
        <AsyncSelect
          v-model:value="model.component"
          :options="pageOptions"
          :disabled="!model.routeFlag"
          @update:value="handleChangeComponet"
        />
      </n-form-item>
      <n-form-item label="权限标志" path="url">
        <n-input v-model:value="model.url" maxlength="100" clearable show-count />
      </n-form-item>
      <n-form-item label="鉴权标志" path="authority">
        <n-input v-model:value="model.authority" maxlength="100" clearable show-count />
      </n-form-item>
      <n-form-item label="排序" path="sort">
        <n-input-number v-model:value="model.sort" :min="0" :max="1000000" />
      </n-form-item>
    </MyForm>
  </BasePage>
</template>
<script setup lang="jsx">
defineOptions({ name: 'MenuAuthManage' })
import * as menuAuthApi from '@/api/menuAuth'
import { useCrud } from '@/hooks/useCrud'
import vIconfont from 'virtual:iconfont'
import vPages from 'virtual:pages'
const querySchemas = []
const columns = [
  {
    title: '权限名称',
    key: 'name',
  },
  {
    title: '权限编码',
    key: 'code',
  },
  {
    title: '操作',
    key: 'actions',
    width: 180,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return (
        <n-flex>
          <ActionButton onClick={() => handleEdit(row)}>修改</ActionButton>
          <ActionButton onClick={() => fromAdd(row.id)}>新增</ActionButton>
          <ActionButton onClick={() => handleDel(row)}>删除</ActionButton>
        </n-flex>
      )
    },
  },
]

function fromAdd(id = null) {
  handleAdd({
    onShow() {
      model.value.pid = id
    },
  })
}
const { type, model, $form, $table, handleAdd, handleEdit, handleDel, handleSubmit } = useCrud({
  name: '权限',
  initForm: {
    id: null,
    pid: null,
    name: null,
    code: null,
    icon: null,
    menuFlag: 0,
    routeFlag: 0,
    path: null,
    component: null,
    url: null,
    authority: null,
    sort: 0,
  },
  apis: {
    add: menuAuthApi.add,
    edit: menuAuthApi.edit,
    del: ({ id }) => menuAuthApi.del(id),
    view: ({ id }) => menuAuthApi.info(id).then((res) => res.data),
  },
  submitFormat({ pid, ...other }) {
    other.pid = pid || 0
    return other
  },
  extraChange() {
    getParentOptions()
  },
})
const iconfontOptions = ref(vIconfont.map((item) => ({ label: item, value: item })))
const renderLabel = (option) => {
  return <i class={['iconfont', option.value]}></i>
}

function handleChangeMenuFlag() {
  model.value.icon = null
}

function handleChangeRouteFlag() {
  model.value.path = null
  model.value.component = null
}

const pageOptions = ref(vPages.map((item) => ({ label: item, value: item })))
function handleChangeComponet(e) {
  console.log(e)
  const path = (e || '').replace('/src/views', '').replace('.vue', '')
  model.value.path = model.value.path || path
}

const parentOptions = ref([])
async function getParentOptions() {
  const { data } = await menuAuthApi.tree()
  parentOptions.value = data
}
onBeforeMount(() => {
  getParentOptions()
})
</script>
<style lang="scss" scoped></style>
